<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            width: 500px;
            border: 2px solid #000;


        }
        .floatDiv{
            width: 100px;
            height: 100px;
            border: 2px dotted red;
            color: red;
            margin: 4px;
            float: left;
        }
        .textDiv{
            color: blue;
            border: 2px dotted blue;
            clear: both;
        }
        .bottomDiv{
            width: 500px;
            height: 100px;
            margin: 5px 0; 
            border: 2px dotted #000;
        }
        .clearfix:after{
            content:' ' ;
            height: 0;
            display: block;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="floatDiv">float Left</div>
        <div class="textDiv">xin nan tongxiao xin nan tongxiao xin nan tongxiao xin nan tongxiao xin nan tongxiao xin nan tongxiao xin nan tongxiao xin nan tongxiao xin nan tongxiao xin nan tongxiao xin nan tongxiao xin nan tongxiao xin nan tongv</div>
    </div>
    <div class="bottomDiv"></div>
</body>
</html>